<template>
  <div class="banner">
      <el-carousel :interval="3000" height="80vh" :pause-on-hover="false" :motion-blur =true>
          <el-carousel-item v-for="bannerimg in bannerimgs" :key="bannerimg.id">
              <el-image class="carousel-img" :src="fileBaseUrl() + bannerimg.imgUrl" fit="cover" />
          </el-carousel-item>
      </el-carousel>
  </div>
</template>

<script setup>
import {fileBaseUrl} from '@/apis/files'
// 定义接收的 props
const props = defineProps({
  bannerimgs: {
      type: Array,
      required: true
  }
})

// 计算属性，处理图片URL前缀

</script>

<style scoped>
.banner {
  width: 100%;
}

.carousel-img {
  width: 100%;
  height: 100%;
}
</style>